<template>
  <div>
    <button @click="toggleShow">mask</button>
<!--  传送门，将DOM传送到指定结点, to=[Selector]  -->
    <teleport to="body">
      <div @click="toggleShow" class="mask" v-if="show"></div>
    </teleport>
    <CommonVueCompnt @mounted="handleEmit" cnm="hahah" :rnm="666"><h3>这里是插槽</h3></CommonVueCompnt>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-class-component'

import CommonVueCompnt from './commonVueCompnt.vue'
@Options({
  components: { CommonVueCompnt }
})
export default class TestTeleport extends Vue {
  show = false;
  toggleShow ():void {
    this.show = !this.show
  }

  // 好像没有用。。
  handleEmit = (param:string):void => {
    alert(param)
  }
}
</script>

<style lang="stylus" scoped>
.mask
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  background: rgba(0,0,0,.35);
  z-index 3
</style>
